<div class="snapshots-modal-form">
  <div class="modal-header">
    <button type="button" class="close" ng-click="close()">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h3 class="modal-title" translate="home.snapshotsPane.modalTitle">Snapshots</h3>
  </div>
  <div class="modal-body">

    <ng-include src="'app/home/alerts/error/errorAlert.tpl.html'"></ng-include>

    <button type="button" class="btn btn-primary"
            ng-if="isPipelineRunning"
            ng-disabled="showLoading || snapshotInProgress || !canExecute"
            ng-click="captureSnapshot()"
            translate="home.snapshotsPane.captureSnapshot">Capture</button>

    <button type="button" class="btn btn-primary"
            ng-if="!isPipelineRunning"
            ng-disabled="showLoading || snapshotInProgress || !canExecute"
            ng-click="captureSnapshot()"
            translate="home.snapshotsPane.startAndCaptureSnapshot">Start & Capture</button>

    <table class="table table-hover">
      <thead>
        <tr>
          <th class="snapshot-label">{{'global.form.name' | translate}}</th>
          <th class="snapshot-time">{{'global.form.captured' | translate}}</th>
          <th class="snapshot-batch-number">{{'global.form.batchNumber' | translate}}</th>
          <th class="snapshot-action">{{'global.form.actions' | translate}}</th>
        </tr>
      </thead>

      <tbody ng-hide="showLoading">
        <tr ng-repeat="snapshotInfo in snapshotsInfo">
          <td>
            <span ng-if="snapshotInfo.inProgress">{{ snapshotInfo.label || snapshotInfo.id }}</span>
            <a href="#"
               ng-if="!snapshotInfo.inProgress"
               editable-text="snapshotInfo.label"
               onaftersave="snapshotInfoLabelUpdated(snapshotInfo)"
               title="{{'home.snapshotsPane.labelChangeTitle' | translate}}"
            >{{ snapshotInfo.label || snapshotInfo.id }}</a>
          </td>
          <td>
            {{!snapshotInfo.inProgress ? (snapshotInfo.timeStamp  | date:'medium') : ('home.snapshotsPane.captureSnapshotInProgress' | translate)}}
          </td>
          <td>
            {{(!snapshotInfo.inProgress && snapshotInfo.batchNumber) ? (snapshotInfo.batchNumber) : '--'}}
          </td>
          <td>
            <a href="javascript:;" translate="global.form.view"
               ng-if="!snapshotInfo.inProgress"
               ng-click="viewSnapshot(snapshotInfo)"></a>
            <span class="separator" ng-if="!snapshotInfo.inProgress">|</span>
            <a href="javascript:;" translate="global.form.download" ng-if="!snapshotInfo.inProgress" ng-click="downloadSnapshot(snapshotInfo)"></a>
            <span class="separator" ng-if="!snapshotInfo.inProgress">|</span>
            <a href="javascript:;" translate="global.form.delete"
               ng-if="!snapshotInfo.inProgress"
               ng-click="deleteSnapshot(snapshotInfo.id, $index)"> Delete </a>
            <a href="javascript:;" translate="global.form.cancel"
               ng-if="snapshotInfo.inProgress"
               ng-click="cancelSnapshot(snapshotInfo.id, $index)"> Cancel </a>
          </td>
        </tr>

        <tr ng-if="snapshotsInfo.length === 0">
          <td colspan="3" class="no-records text-center"
              translate="home.snapshotsPane.noSnapshots">No Snapshots.</td>
        </tr>

      </tbody>

    </table>

    <div show-loading="showLoading"></div>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" ng-click="close()"
            translate="global.form.close">close</button>
  </div>
</div>
